import React, { Component } from 'react'
// 导入要使用的组件，CSSTransition是基础班，TransitionGroup进阶版
import {
  CSSTransition,
  SwitchTransition,
} from 'react-transition-group';
import './Transition3.css'
export default class Transition3 extends Component {
  constructor() {
    super()
    this.state = {
      state: false
    }
  }
  changeBtn() {
    this.setState({
      state: !this.state.state
    })
  }
  render() {
    return (
      <div>
        <SwitchTransition>
          <CSSTransition
            classNames='fade'
            addEndListener={(node, done) => node.addEventListener("transitionend", done, false)}
            key={this.state.state ? "Goodbye, world!" : "Hello, world!"}
          >
            <button onClick={()=>this.changeBtn()}>
              {this.state.state?'Goodbye, world':'Hello, world'}
            </button>
          </CSSTransition>
        </SwitchTransition>
      </div>
    )
  }
}
